import React from 'react';
import Navbar from "../../components/navbar/navbar"
import "./my.css"
import { Link } from "react-router-dom"
import { Toast } from 'antd-mobile';

function My() {
  let [login, editLogin] = React.useState(true)

  React.useEffect(() => {
    let login = window.localStorage.getItem("token");
    if (!login) {
      editLogin(true)
    } else {
      editLogin(false)
    }
  })
  const getout = () => {
    window.localStorage.removeItem('token')
    editLogin(true)
    Toast.show('退出登录')

  }
  return (

    <div className="My-page">
      <div className="header">
        {
          login ? (<div className="top" >
            <div className="icon">
              <img src="../assets/img/home_icon_mail.png" alt="" />
              <img src="../assets/img/设置齿轮.png" alt="" />
            </div>
            <Link to={"/loginpass"}>
              <div className="login">

                <img src="../assets/img/mine_no_login_head.png" alt="" />
                <div className="username" >请登录</div>
              </div>
            </Link>

          </div>) : (<div className="top" >
            <div className="icon">
              <img src="../assets/img/home_icon_mail.png" alt="" />
              <img src="../assets/img/设置齿轮.png" alt="" />
            </div>
            <div className="login">
              <img src="../assets/img/user.jpg" alt="" />
              <div className="username">Mercurio</div>
            </div>
          </div>)
        }


        <div className="bottom">
          <div className="b-top">
            <div className="left">
              <img src="../assets/img/me_vip_icon.png" alt="" />
              <div className="txt">
                <h4>VIP会员</h4>
                <span>1w+课程免费看</span>
              </div>
            </div>
            <div className="right">
              <img src="../assets/img/me_ecoin_icon.png" alt="" />
              <div className="txt">
                <h4>厨币商城</h4>
                <span>赚厨币，兑好礼</span>
              </div>
            </div>
          </div>
          <div className="b-mid">
            <ul>
              <li>
                <Link to={'/mycollect'}>

                  <div className="img">
                    <img src="../assets/img/16.png" alt="" />

                  </div>
                  <span>作品</span></Link>
              </li>
              <li  >
                <Link to={'/mycollect'}>
                  <div className="img">
                    <img src="../assets/img/15.png" alt="" />
                  </div>
                  <span>菜谱</span>
                </Link>
              </li>
              <li  >
                <Link to={'/myclass'}>

                  <div className="img">
                    <img src="../assets/img/17.png" alt="" />
                  </div>
                  <span>课程</span></Link>
              </li>
              <li  >
                <Link to={'/mydist'}>

                  <div className="img">
                    <img src="../assets/img/18.png" alt="" />
                  </div>
                  <span>菜篮</span></Link>
              </li>
            </ul>
          </div>
          <div className="b-bot">
            <ul>
              <li >
                <h4>我的钱包</h4>
                <img src="../assets/img/shop_list_more.png" alt="" />
              </li>
              <li>
                <h4>草稿箱</h4>
                <img src="../assets/img/shop_list_more.png" alt="" />
              </li>
              <li>
                <h4>达人申请</h4>
                <img src="../assets/img/shop_list_more.png" alt="" />
              </li>
              <li>
                <h4>联系客服</h4>
                <img src="../assets/img/shop_list_more.png" alt="" />
              </li>
            </ul>
          </div>
        </div>
        {
          !login ? <div className="removeLg" onClick={getout}>
            退出登录
          </div> : ""
        }

      </div>
      {/* 底部导航 */}
      <Navbar index="3" />
    </div>




  )



}


export default My;
